<template>
  <div class="main-wrapper">
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="closeForm('')">角色管理</span>
      <i class="breadcrumb-item-icon el-icon-arrow-right"></i>
      <span class="breadcrumb-item">{{ mode === 'add' ? '新增角色':'编辑角色' }}</span>
    </div>

    <div class="wrap">
      <el-form :model="form" :rules="rules" label-width="100px" class="groupForm" ref="groupForm">
        <el-form-item label="角色名称:" prop="roleName">
          <el-input
              class="input"
              v-model="form.roleName"
              placeholder="请输入"
              style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色组:" prop="pid">
          <el-select
              clearable
              v-model="form.pid"
              class="select1"
              placeholder="请选择"
          >
            <selectOptions
                :options="
                    () =>
                      $api
                        .api_urcap_auth_role_listAll({
                          param:{roleType:'角色组'}
                        })
                        .then(res => {
                          return res.data
                        })
                  "
                :labelField="'roleName'"
                :valueField="'id'"
            >
            </selectOptions>
          </el-select>
        </el-form-item>
        <el-form-item label="数据权限:" prop="dataScope">
          <el-radio-group v-model="form.dataScope">
            <el-radio :label="1">全组织</el-radio>
            <el-radio :label="2">所在部门及下级部门</el-radio>
            <el-radio :label="3">仅个人</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column label="系统" width="200">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked">{{scope.row.menuName}}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="应用权限">
          <template slot-scope="scope">
            <div class="menu-box" v-if="scope.row?.children1?.length">
              <el-checkbox v-model="item.checked" v-for="(item,index) in scope.row.children1" :key="index">{{item.menuName}}</el-checkbox>
            </div>
            <div class="menu-box" v-if="scope.row?.children2?.length">
              <el-checkbox v-model="item.checked" v-for="(item,index) in scope.row.children2" :key="index">{{item.menuName}}</el-checkbox>
            </div>
            <div class="menu-box" v-if="scope.row?.children3?.length">
              <el-checkbox v-model="item.checked" v-for="(item,index) in scope.row.children3" :key="index">{{item.menuName}}</el-checkbox>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="group-footer">
        <el-button @click="handleSubmit" :loading="btnLoading" size="small" class="btn plain-btn">保存</el-button>
        <el-button @click="closeForm('')" size="small" class="btn default-btn">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {sandbox} from "@/libs/util";
import groupForm from '@/mixins/groupForm.js'

export default {
  mixins: [groupForm],
  props: {
    mode: {
      type: String,
      default: ''
    },
    userMenu: {
      type: Array,
      default: ()=> []
    }
  },
  data() {
    return {
      tableData:[],
      form: sandbox({
        roleName:'',
        pid:'',
        dataScope:1,
        menuIdList:[]
      }),
      rules: {
        roleName: [{required: true, message: '必填项', trigger: 'blur'}],
        pid: [{required: true, message: '必填项', trigger: 'trigger'}],
        dataScope: [{required: true, message: '必填项', trigger: 'trigger'}],
      },
      loading: false,
      btnLoading: false,
    }
  },
  methods: {
    AddRow(){
      let form = sandbox(this.form)
      form.menuIdList = []
      this.tableData.forEach((item)=>{
        if(item.checked){
          form.menuIdList.push(item.id)
        }
        item.children1.forEach((ele)=>{
          if(ele.checked){
            form.menuIdList.push(ele.id)
          }
        })
        item.children2.forEach((ele)=>{
          if(ele.checked){
            form.menuIdList.push(ele.id)
          }
        })
        item.children3.forEach((ele)=>{
          if(ele.checked){
            form.menuIdList.push(ele.id)
          }
        })
      })
      return this.$api.api_urcap_roleManage_addRole({
        body: form,
        config: {showMsg: true}
      })
    },
    UpdateRow(){
      return this.AddRow()
    },
    getMenuList(){
      this.loading = true
      this.$api.api_urcap_auth_menuTree({
        body: {
        },
      }).then(res => {
        let menu = res.data[0].children
        menu.forEach((item)=>{
          item.children1 = []
          item.children2 = []
          item.children3 = []
          if(item?.children?.[0]){
            item.children1.push(item.children[0])
            // if(item.children[0]?.children){
            //   item.children[0]?.children.forEach((element)=>{
            //     item.children1.push(element)
            //   })
            // }
          }
          if(item?.children?.[1]){
            item.children2.push(item.children[1])
            // if(item.children[1]?.children){
            //   item.children[1]?.children.forEach((element)=>{
            //     item.children2.push(element)
            //   })
            // }
          }
          if(item?.children?.[2]){
            item.children3.push(item.children[2])
            // if(item.children[2]?.children){
            //   item.children[2]?.children.forEach((element)=>{
            //     item.children3.push(element)
            //   })
            // }
          }
          this.userMenu.forEach(ele =>{
            if(ele.id === item.id){
              item.checked = true
            }
            item.children1.forEach(i=>{
              if(ele.id === i.id){
                i.checked = true
              }
            })
            item.children2.forEach(i=>{
              if(ele.id === i.id){
                i.checked = true
              }
            })
            item.children3.forEach(i=>{
              if(ele.id === i.id){
                i.checked = true
              }
            })
          })
        })
        this.tableData  = menu
      }).finally(()=>{
        this.loading = false
      })
    },
  },
  watch:{
    mode(val){
      this.tableData  = []
      val && this.getMenuList()
    },
  }
}
</script>

<style scoped lang="scss">
.main-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
}

.wrap {
  position: relative;
  height: calc(100% - 140px);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #FFFFFF;
  overflow-y: auto;
}

.group-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid #DCE1E4;
  margin-top: 20px;

  .btn {
    width: 120px;
    height: 46px;
    line-height: 46px;
    padding: 0;
    font-size: 16px;
  }
}

.menu-box{
  padding: 10px 0;
  font-size: 16px;
}
</style>

<style scoped>
/deep/ .el-checkbox__inner {
  width: 20px;
  height: 20px;
}
/deep/ .el-checkbox__label {
  font-size: 16px;
}
/deep/ .el-checkbox__inner::after {
  height: 10px;
  left: 6px;
  top: 2px;
  width: 5px;
}
/deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-right: 1px solid #DCE1E4;
}
/deep/ .el-table td, .el-table th.is-leaf{
  border-bottom: 1px solid #DCE1E4;
}
</style>
